<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            margin-bottom: 20px;
        }

        form {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"],
        textarea,
        input[type="datetime-local"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .deleteTask {
            background-color: #dc3545;
        }

        .deleteTask:hover {
            background-color: #c82333;
        }

        #reminder {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            display: none;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="publish">
            <h2>任务管理</h2>
            <form id="taskForm">
                <label for="taskName">任务名称:</label>
                <input type="text" id="taskName" name="taskName">
                <label for="taskDescription">任务描述:</label>
                <textarea id="taskDescription" name="taskDescription"></textarea>
                <label for="taskDeadline">任务完成时间:</label>
                <input type="datetime-local" id="taskDeadline" name="taskDeadline">
                <button type="submit">提交任务</button>
            </form>
        </div>

        <div id="display">
            <h2>任务列表</h2>
            <table id="taskTable">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>任务描述</th>
                        <th>任务完成时间</th>
                        <th>提交时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Task items will be added here dynamically -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="reminder">
        <p>任务时间到了！</p>
        <audio id="reminderSound" src="reminder.mp3" loop></audio>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            displayTasks();

            $('#taskForm').submit(function (e) {
                e.preventDefault();
                // $('#taskDeadline').val()
                var taskName = $('#taskName').val();
                var taskDescription = $('#taskDescription').val();
                var taskDeadline = dateFormat();
                var submitTime = new Date().toLocaleString();

                // Save task to localStorage
                var task = {
                    name: taskName,
                    description: taskDescription,
                    deadline: taskDeadline,
                    submitTime: submitTime
                };
                localStorage.setItem('task_' + Date.now(), JSON.stringify(task));

                // Display tasks
                displayTasks();

                // Clear form
                $('#taskForm')[0].reset();
            });

            // Delete task
            $(document).on('click', '.deleteTask', function () {
                var taskId = $(this).data('id');
                localStorage.removeItem(taskId);
                displayTasks();
            });

            // Check for task deadline and show reminder
            setInterval(function () {
                $('#taskTable tbody tr').each(function () {
                    var deadline = new Date($(this).find('td:eq(2)').text()).getTime();
                    var currentTime = new Date().getTime();
                    if (currentTime >= deadline) {
                        showReminder($(this).find('td:eq(0)').text());
                        return false; // Stop looping
                    }
                });
            }, 10000); // Check every 10 seconds

            // Function to display tasks from localStorage
            function displayTasks() {
                $('#taskTable tbody').empty();
                for (var i = 0; i < localStorage.length; i++) {
                    var key = localStorage.key(i);
                    if (key.startsWith('task_')) {
                        var task = JSON.parse(localStorage.getItem(key));
                        $('#taskTable tbody').append('<tr><td>' + task.name + '</td><td>' + task.description + '</td><td>' + task.deadline + '</td><td>' + task.submitTime + '</td><td><button class="deleteTask" data-id="' + key + '">删除</button></td></tr>');
                    }
                }
            }

            // Function to show reminder
            function showReminder(taskName) {
                $('#reminder').slideDown();
                $('#reminderSound')[0].play();
                $('#reminder p').text(taskName + '的任务时间到了！');
                setTimeout(function () {
                    $('#reminder').slideUp();
                    $('#reminderSound')[0].pause();
                    $('#reminderSound')[0].currentTime = 0;
                }, 10000); // Hide reminder after 10 seconds
            }

            function dateFormat() {
                let interviewTime = $('#taskDeadline').val()
                if (interviewTime.indexOf('T') != -1) {
                    interviewTime += ':00'
                    interviewTime = interviewTime.replace('T', ' ')
                    return interviewTime
                    // $('#taskDeadline').val(interviewTime)
                }
            }
        });
    </script>
</body>

</html>